<template>
	<div>
		<mt-swipe :auto="4000" style="height: 200px;width: 100%;">
		  <mt-swipe-item><img style="height: 200px;width: 100%;" src="../../static/image/index/banner1.png"/></mt-swipe-item>
		  <mt-swipe-item><img style="height: 200px;width: 100%;" src="../../static/image/index/banner2.png"/></mt-swipe-item>
		</mt-swipe>
		<div class="mui-content">
		        <ul  class="mui-table-view mui-grid-view mui-grid-9">
		            <li v-if="performanceappraisal" class="mui-table-view-cell mui-media mui-col-xs-6 mui-col-sm-6">
		            	<router-link to="/performanceappraisal" >
		            		<img src="../../static/image/index/appraise.png"/>
		                    <!--<span class="mui-icon mui-icon-home"></span>-->
		                    <div class="mui-media-body">绩效评价</div>
		                </router-link>
		            </li>
		            <li v-if="performanceanalysis" class="mui-table-view-cell mui-media mui-col-xs-6 mui-col-sm-6">
		            	<router-link to="/performanceanalysis" >
		            		<img src="../../static/image/index/analyse.png"/>
		                    <!--<span class="mui-icon mui-icon-email"></span>-->
		                    <div class="mui-media-body">质量分析</div>
		            	</router-link>
		            </li>
		            <li v-if="studentachievement" class="mui-table-view-cell mui-media mui-col-xs-6 mui-col-sm-6">
		            	<router-link to="/studentachievement" >
		            		<img src="../../static/image/index/achievement.png"/>
		                    <!--<span class="mui-icon mui-icon-chatbubble"></span>-->
		                    <div class="mui-media-body">学生成绩</div>
		                </router-link>
		            </li>
		        </ul> 
		</div>
	</div>
</template>

<script>
	import { Swipe, SwipeItem } from 'mint-ui';
	import { getsessionstorage} from '@/components/js/Localstorage'
	export default{
		data(){
			return{
				performanceappraisal:false,
				performanceanalysis:false,
				studentachievement:false,
			}
		},
		created(){
			this.setMenu()
		},
		methods:{
			//初始化的时候适配菜单项
			setMenu:function(){
				let sessionroleinfo = JSON.parse(getsessionstorage('topMenuInfo'))
				this.performanceappraisal = sessionroleinfo.performanceappraisal
				this.performanceanalysis = sessionroleinfo.performanceanalysis
				this.studentachievement = sessionroleinfo.studentachievement
			}
			
		}
	}
</script>

<style>
	.mint-swipe {
        height: 200px;
        color: #fff;
        font-size: 30px;
        text-align: center;
        margin-bottom: 20px;
      }
      .mint-swipe-item {
        line-height: 200px;
      }
      .slide1 {
      	background-color: #0089dc;
        color: #fff;
      }
      .slide2 {
        background-color: #ffd705;
        color: #000;
      }
      .slide3 {
        background-color: #ff2d4b;
        color: #fff;
      }
      .mui-grid-view.mui-grid-9{
      	background-color: white;
      }
</style>